<template>
<div>
  <br>
  <div><i class="el-icon-knife-fork" style="color: red;font-size: 20px">
  </i><span style="font-size: 20px"><b>健身杀手</b></span>
    <a style="color: darkgrey;font-size: 15px">&nbsp;餐厅介绍</a>
  </div><br>
  <div v-for="(item,index) in menus" :key="index"  class="clas" >
      <div style="height: 150px;cursor:pointer;">
        <a :href='item.url' style="text-decoration: none" target="_blank">
        <el-image :src='item.photo' style="width: 220px;height: 130px;">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <div class="type1"><h>{{item.name}}</h></div>
        <div class="type2"><h>{{ item.requence }}</h></div>
        </a>
      </div>
      <br>
  </div>
</div>
</template>

<script>
export default {
  name: "dinner",
  data() {
    return {
      menus: [
        { url:"http://www.kfc.com.cn/kfccda/index.aspx",
          photo: require('@/assets/dinner1.png'),
          name: "肯德基",
          requence: "薯条，鸡肉汉堡，新奥尔良鸡翅，劲爆鸡米花，玉米沙拉，蛋挞等",
        },{ url:"https://www.mcdonalds.com.cn/",
          photo: require('@/assets/dinner2.png'),
          name: "麦当劳",
          requence: "脆皮甜筒，草莓新地，巨无霸汉堡，麦香鸡腿堡，原味板烧鸡腿堡等",
        },{ url:"https://www.pizzahut.com.cn/",
          photo: require('@/assets/dinner3.png'),
          name: "必胜客",
          requence: "匠心手拍比萨，海鲜狂欢大比萨，香烤劲牛比萨，蜜汁热辣鸡等",
        },{ url:"https://www.bkchina.cn/",
          photo: require('@/assets/dinner4.png'),
          name: "汉堡王",
          requence: "杏鲍菇皇堡(九层塔风味)，盐酥香骨鸡，南瓜芝士风味派，半桃乌龙茶等",
        },{ url:"https://www.starbucks.com.cn/",
          photo: require('@/assets/dinner5.png'),
          name: "星巴克",
          requence: "麦芽雪冷萃，冷萃冰咖啡，美式咖啡，拿铁，摩卡，卡布奇诺，腰果等",
        },
      ]
    }
  }
}
</script>

<style scoped>
.clas{
  height: 165px;
}
.type1{
  position: relative;
  top:-130px;
  left: 230px;
  width: 50px;
  color: black;
  font-weight: bolder;
  font-size: 15px;
}
.type2{
  position: relative;
  top:-125px;
  left: 230px;
  width: 130px;
  height: 50px;
  color: #888888;
  font-size: 15px;
}
</style>
